<template>
	<!-- 店铺 -->
	<view class="pages-home">
		<view class="pd-md">
			<view >
				
				<view class="fill-base flex-center radius-20 pd-md mb-md">
					<image mode="aspectFill" class="cover radius-16 mr-md" :src="userInfo.avatar"></image>
					<view class="flex-column flex-y-start" style="width: 80%;">
						<view class="f-title c-title">{{ userInfo.user_nicename }}</view>
						<view class="f-caption c-caption">{{ detail.seller_desc }}</view>
					</view>
				</view>
				
				<view class="fill-base flex-between flex-center radius-20 pd-md mb-md">
					<view class="flex-column flex-center" style="width: 50%;">
						<view class="f-title c-title mb-lg">账号金额（元）</view>
						<view class="f-title c-warning">{{detail.balance_info.balance}}</view>
					</view>
					
					<view class="flex-column flex-center" style="width: 50%;">
						<view class="f-title c-title mb-lg">累计收入（元）</view>
						<view class="f-title c-warning">{{detail.balance_info.balance_total}}</view>
					</view>
				</view>
				
				<view class="mine-menu-list box-shadow fill-base radius-16">
					<view @tap="toJumpAll(2)" class="menu-title flex-between pl-lg pr-md b-1px-b">
						<view class="f-paragraph c-title text-bold">我的订单</view>
						<view class="flex-y-center f-caption c-paragraph">全部订单<i class="iconfont icon-right"></i></view>
					</view>
					<view class="flex-warp pt-lg pb-lg">
						<view @tap.stop="toJump('orderList', index)"
							class="item-child flex-center flex-column f-caption c-paragraph"
							v-for="(item, index) in orderList" :key="index">
							<i class="iconfont" :class="item.icon" :style="{color:primaryColor}"></i>
							<view class="mt-sm">{{ item.text }}</view>
						</view>
					</view>
				</view>
				
				<view class="fill-base flex-between flex-center radius-20 pd-md mb-md">
					<!-- <view @tap.stop="toJumpGoods" class="flex-center flex-column" style="width: 25%">
						<i class="iconfont addgoods" :style="{color:primaryColor}"></i>
						<view class="f-paragraph c-black mt-sm"> {{ detail.shop_info.type == 0 ? "添加商品" : "添加项目" }} </view>
					</view> -->
					<view @click="toJumpopen()" class="flex-center flex-column" style="width: 25%">
						<image src="../../../static/shop.png" style="width:18px;height:18px;"></image>
						{{detail.shop_info ?'我的小店':'我要开店'}}
					</view>
					<!-- <view @tap.stop="toJumpGoodsList" class="flex-center flex-column" style="width: 25%">
						<i class="iconfont goods" :style="{color:primaryColor}"></i>
						<view class="f-paragraph c-black mt-sm" :style="detail.shop_info ?'color:#000;':'color:lightgrey;'">{{ detail.shop_info.type == 0 ? "添加商品" : "添加项目" }}</view>
					</view> -->
					<view @click="toJumpproduct()" class="flex-center flex-column" style="width: 25%" :style="detail.shop_info ?'color:#000;':'color:lightgrey;'">
						<image src="../../../static/product.png" style="width:18px;height:18px;"></image>
						添加商品
					</view>
					<view @tap.stop="toJumpAddress" class="flex-center flex-column" style="width: 25%">
						<i class="iconfont addresslist" :style="{color:primaryColor}"></i>
						<view class="f-paragraph c-black mt-sm">地址管理</view>
					</view>
				
					
				</view>
				
				<view @click="toProcess()" style="padding:12px;" class="fill-base flex-between flex-center radius-20 pd-md mb-md" v-if="detail.shop_info">
					待审核列表 >><text style="color: grey;">({{detail.needshen}}条待审核)</text>
					</view>
					
					
				
			</view>
		</view>

		<view class="space-max-footer"></view>
		<!-- <fix-bottom-button @confirm=confirm
			:text="[{type:'confirm',text: confirmText}]" bgColor="#fff">
		</fix-bottom-button> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import parser from "@/components/jyf-Parser/index";
	import $api from '@/api/index.js';
	export default {
		components: {
			parser
		},
		data() {
			return {
				confirmText: '编辑',
				activeIndex: 0,
				options: {},
				coinChangeindex: 0,
				detail: {},
				lockTap: false,
				profit: {},
				money: '',
				orderList: [
					{
						icon: 'icondaizhifu',
						text: '待支付',
						url: '/pages/order?tab=1'
					}, {
						icon: 'icondaifuwu',
						text: '待发货',
						url: '/pages/order?tab=2'
					}, {
						icon: 'iconanmo2',
						text: '已发货',
						url: '/pages/order?tab=3'
					}, {
						icon: 'icondaipingjia',
						text: '已签收',
						url: '/pages/order?tab=4'
					}, {
						icon: 'icontuikuan',
						text: '退款/售后',
						url: '/user/pages/refund/list'
					}],
				orderList2: [{
					icon: 'icondaijiedan',
					text: '待接单',
					url: '/technician/pages/order/list'
				}, {
					icon: 'iconyijiedan',
					text: '待服务',
					url: '/technician/pages/order/list?tab=1'
				}, {
					icon: 'iconfuwuzhong',
					text: '服务中',
					url: '/technician/pages/order/list?tab=2'
				}],
				imagelist: ['https://card-1253902191.cos.ap-chengdu.myqcloud.com/image/666/22/09/709c5224a2a54ba0b4857779206b2118.MOV']
				
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
		}),
		onLoad(options) {
			this.$util.showLoading()
			this.options = options
			this.initIndex()
		},
		onPullDownRefresh() {
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		
		
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo']),
			...mapMutations(['getUserIndex']),
			async initIndex(refresh = false) {
				this.shopdetails()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			initRefresh() {
				this.initIndex(true)
			},
			//店铺详情
			async shopdetails() {
				let data = await this.$api.mine.shopdetails();
				this.detail = data;
				// this.detail.shop_info.type = this.detail.shop_info.type == 1 ? 0 : 1
				// debugger
				console.log('===店铺详情', data)
				this.$util.hideAll()
			},
			toJumpGoods() {
				if(this.detail.shop_info.type == 0){
					this.$util.goUrl({
						url: '/user/pages/shop/edit-goods',
					})
				} else {
					this.$util.goUrl({
						url: '/user/pages/shop/edit-service',
					})
				}
			},
			toJumpproduct()
			{
				this.$util.goUrl({
					url: '/user/pages/shop/goods-list',
				})
			},
			toProcess()
			{
				this.$util.goUrl({
					url: '/pages/process',
				})
			},
			toJumpopen() {
				if(this.detail.shop_info){
					this.$util.goUrl({
						url: `/user/pages/shop/edit?type=${1}`
					})
				}else{
					this.$util.goUrl({
						url: '/user/pages/shop/edit?type=0',
					})
				}
			},
			toJumpGoodsList() {
				if(this.detail.shop_info.type == 0){
					this.$util.goUrl({
						url: '/user/pages/shop/goods-list',
					})
				} else {
					this.$util.goUrl({
						url: '/user/pages/shop/service-list',
					})
				}
			},
			toJumpAddress() {
				this.$util.goUrl({
					url: '/user/pages/address/list',
				})
			},
			// 跳转页面
			toJumpAll(key) {
				let url = {
					1: `/pages/order`,
					2: `/technician/pages/order/list`
				}
				let openType = {
					1: `reLaunch`,
					2: `navigateTo`
				}
				this.$util.goUrl({
					url: url[key],
					openType: openType[key]
				})
			},
			toJump(key, index) {
				let url = `/technician/pages/order/list?tab=`+(index)
				let openType = 'navigateTo'
				this.$util.goUrl({
					url,
					openType
				})
			},
			confirm() {
				this.$util.goUrl({
					url: `/user/pages/shop/edit?type=${1}`
				})
			},
		}
		
	}
</script>

<style lang="scss">
	.pages-home {
		background-color: #eaeaea;
		.view-bg {
			position: relative;
			max-width: 25%;
			text-align: center;
			border-radius: 50px;
			border: 1rpx solid #333;
		}
		
		.view-info-bg {
			position: relative;
			max-width: 50%;
			padding: 10rpx 15rpx;
			text-align: center;
			border-radius: 50px;
			border: 1rpx solid #333;
		}
		
		.item-btn {
			height: 54rpx;
			padding-left: 15rpx;
			padding-right: 15rpx;
		}
		
		.cover {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
		}
		
		.total-box {
			width: 100%;
			height: 84rpx;
			background-color: #fff;
			.box-btn {
				margin: 0;
				padding: 0;
				margin-right: 2rpx;
				height: 62rpx;
				display: flex;
				align-items: center;
				background-color: #e4e4e4;
				border-radius: 42rpx;
				line-height: 1.5;
				border-color: #000;
				border-width: 2rpx;
				text-align: left;
				color: #333;
			}
			.box-btn2 {
				margin: 0;
				padding: 0;
				margin-right: 2rpx;
				height: 62rpx;
				display: flex;
				align-items: center;
				background-color: #bccfde;
				border-radius: 42rpx;
				line-height: 1.5;
				border-color: #000;
				border-width: 2rpx;
				text-align: left;
				color: #333;
			}
		}
	
		.user-item {
			background-color: #fff;
			float: left;
			box-sizing: border-box;
			width: 44%;
			text-align: center;
			height: 100rpx;
			// padding: 10px 6px;
			
			.cover {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50rpx;
			}
		}
		
		.user-list {
			background-color: #fff;
			float: left;
			box-sizing: border-box;
			width: 100%;
			text-align: center;
			height: 100rpx;
			// padding: 10px 6px;
			
			.cover {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50rpx;
			}
		}
		
		.msg {
			background-color: #fff;
			float: left;
			box-sizing: border-box;
			width: 100%;
			padding-bottom: 120rpx;
		}
	
		.image1 {
			position: absolute;
			margin: 20rpx 0rpx;
			border-radius: 42rpx;
			
			width: 96%;
			// text-align: center;
		}
		
		.shop-bg {
			background-color: #a27b6c;
			border-radius: 42rpx;
			margin: 10rpx 0rpx;
			padding: 15rpx 15rpx;
			margin-bottom: 40rpx;
			.btn {
				background-color: #5e2d37;
			}
		}
		
		.quan-bg {
			background-color: #dededc;
			border-radius: 42rpx;
			margin: 10rpx 0rpx;
			padding: 15rpx 15rpx;
			margin-bottom: 40rpx;
		}
		
		.user-bg {
			background-color: #fff;
			border-radius: 42rpx;
			margin: 10rpx 0rpx;
			padding: 15rpx 15rpx;
			margin-bottom: 40rpx;
			.cover {
				width: 60rpx;
				height: 60rpx;
				border-radius: 30rpx;
			}
		}
		
		.shop-list-bg {
			background-color: #fff;
			border-radius: 42rpx;
			margin: 10rpx 0rpx;
			padding: 15rpx 15rpx;
			margin-bottom: 40rpx;
			.cover {
				width: 160rpx;
				height: 100rpx;
				border-radius: 20rpx;
			}
		}
		
		.msg-bg {
			background-color: #fff;
			border-radius: 42rpx;
			margin: 10rpx 0rpx;
			padding: 15rpx 15rpx;
			margin-bottom: 40rpx;
			.btn {
				width: 60%;
				height: 80rpx;
				background-color: #d04860;
				border-radius: 20rpx;
			}
			.cover {
				width: 160rpx;
				height:160rpx;
				border-radius: 0rpx;
			}
		}
		
		.item-btn {
			height: 54rpx;
			padding-left: 15rpx;
			padding-right: 15rpx;
		}
		.total-box {
			width: 100%;
			height: 84rpx;
			background-color: #fff;
			.box-btn {
				margin: 0;
				padding: 0;
				margin-right: 2rpx;
				height: 62rpx;
				display: flex;
				align-items: center;
				background-color: #e4e4e4;
				border-radius: 42rpx;
				line-height: 1.5;
				border-color: #000;
				border-width: 2rpx;
				text-align: left;
				color: #333;
			}
			.box-btn2 {
				margin: 0;
				padding: 0;
				margin-right: 2rpx;
				height: 62rpx;
				display: flex;
				align-items: center;
				background-color: #bccfde;
				border-radius: 42rpx;
				line-height: 1.5;
				border-color: #000;
				border-width: 2rpx;
				text-align: left;
				color: #333;
			}
		}
			
		.user-item {
			background-color: #fff;
			float: left;
			box-sizing: border-box;
			width: 44%;
			text-align: center;
			height: 100rpx;
			// padding: 10px 6px;
			
			.cover {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50rpx;
			}
		}
		
		.user-list {
			background-color: #fff;
			float: left;
			box-sizing: border-box;
			width: 100%;
			text-align: center;
			height: 100rpx;
			// padding: 10px 6px;
			
			.cover {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50rpx;
			}
		}
		
		.msg {
			background-color: #fff;
			float: left;
			box-sizing: border-box;
			width: 100%;
			height: 100rpx;
			padding-bottom: 400rpx;
			// padding: 10px 6px;
		}
		
		.mine-menu-list {
			margin: 10rpx 10rpx;
		
			.menu-title {
				height: 90rpx;
		
				.iconfont {
					font-size: 24rpx;
				}
			}
		
			.item-child {
				width: 20%;
				margin: 10rpx 0;
		
				.iconfont {
					font-size: 52rpx;
				}
		
				.item-img {
					width: 88rpx;
					height: 88rpx;
		
					.iconfont {
						font-size: 44rpx;
					}
		
					.item-img {
						top: 0;
						left: 0;
						opacity: 0.1;
					}
				}
		
			}
		}
	
	}
</style>
